<!--
 * @Author: zqg
 * @Date: 2021-01-10 13:18:48
 * @LastEditors: zqg
 * @LastEditTime: 2021-02-20 16:56:36
 * @Description: file content
-->
<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="130px"
    class="demo-ruleForm"
    label-position="right"
  >
    <el-row>
      <el-col>考勤设置</el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <div class="setting-item" v-for="item in types" :key="item.index">
      <el-form-item
        :label="
          item.text +
            (item.type !== 'workOvertime' ? '扣除工资：' : '提成工资：')
        "
        prop="name"
        class="setting-from"
      >
        <el-input
          class="setting-input"
          v-model="ruleForm[item.type]"
        ></el-input>
        <span>{{ item.unit }}</span>
      </el-form-item>
      <div class="tip">{{ item.tip }}</div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="settingSave">确定</el-button>
    </div>
  </el-form>
</template>

<script>
import { getDict, getStoreId } from '@/utils/index'
import {
  setAttendanceSetting,
  getAttendanceSetting
} from '@/api/after-sale/personnel/attendance'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      ruleForm: {
        vacate: '',
        noWork: '',
        forgetClockIn: '',
        leaveEarly: '',
        workOvertime: ''
      },
      storeId: getStoreId() || '',
      // 验证规则
      rules: {
        vacate: [
          // { validator: vacateValidator, trigger: 'blur' }
        ]
      },
      // 考勤类型列表
      types: getDict(['考勤分类'])['考勤分类'].filter(
        item => item.type !== 'late'
      )
    }
  },
  created() {
    this.getAttendanceSetting()
  },
  methods: {
    /**
     * @description: 关闭弹窗
     * @param {*}
     * @return {*}
     */
    handleClose() {
      this.$emit('set-visible', false)
    },
    /**
     * @description: 获取考勤设置
     * @param {*}
     * @return {*}
     */
    getAttendanceSetting() {
      getAttendanceSetting(this.storeId).then(res => {
        let { success, data } = res
        if (success && data) {
          this.ruleForm = {
            vacate: data.qjkcRNB || '',
            noWork: data.kgkcRNB || '',
            forgetClockIn: data.wdkkcRNB || '',
            leaveEarly: data.ztkcRNB || '',
            workOvertime: data.jbtcRNB || ''
          }
        }
      })
    },
    /**
     * @description: 保存设置
     * @param {*}
     * @return {*}
     */
    settingSave() {
      const ruleForm = this.ruleForm
      const data = {
        //加班提成工资N元
        jbtcRNB: +ruleForm.workOvertime || 0,
        //旷工扣除工资N元
        kgkcRNB: +ruleForm.noWork || 0,
        //请假扣除工资N元
        qjkcRNB: +ruleForm.vacate || 0,
        // 门店id
        storeId: this.storeId,
        //忘打卡扣除工资N元
        wdkkcRNB: +ruleForm.forgetClockIn || 0,
        //早退扣除工资N元
        ztkcRNB: +ruleForm.leaveEarly || 0
      }
      setAttendanceSetting(data).then(res => {
        let { success } = res
        if (success) {
          this.$message.success('设置成功')
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-item {
  margin-top: 13px;
  padding: 16px 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  border: 1px solid rgba(8, 8, 8, 57);
}
.el-form-item {
  margin-bottom: 10px;
}
.setting-from .el-form-item__content {
  text-align: left;
}
.setting-input {
  width: 150px;
  border-radius: 5px;
  color: rgba(136, 136, 136, 100);
  font-size: 14px;
}
.tip {
  color: rgba(16, 16, 16, 100);
  font-size: 12px;
}
.footer {
  margin-top: 20px;
  text-align: right;
  .el-button {
    background-color: #00a1ec;
    color: #ffffff;
  }
}
</style>
